<template>
  <div class="content-div">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-search background="#1989fa" class="search-box" shape="round" v-model="searchKey" placeholder="请输入搜索内容" @search="searchInfo" />
      <!-- <div class="list-search-box" v-if="$route.query.type != '1'">
        <van-dropdown-menu active-color="#1989fa" v-if="$route.query.type == '2' || $route.query.type == '3'">
          <van-dropdown-item v-model="data.item" :options="optionItem" />
        </van-dropdown-menu>
        <van-dropdown-menu active-color="#1989fa" v-if="$route.query.type == '2' || $route.query.type == '0'">
          <van-dropdown-item v-model="data.money" :options="optionMoney" />
        </van-dropdown-menu>
        <van-dropdown-menu active-color="#1989fa" v-if="$route.query.type == '0'">
          <van-dropdown-item v-model="data.num" :options="optionNum" />
        </van-dropdown-menu>
      </div> -->
      <div class="list-outbox">
        <div class="list-box">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div v-if="$route.query.type == '1'">
              <div @click="toPage(item)" class="list-item-box3" v-for="(item, index) in list" :key="index">
                <div class="list-head-box">
                  <img :src="item.give_service_picture" alt="" srcset="">
                  <div class="list-name-box">
                    <span class="list-name">{{item.give_service_name}}</span>
                    <span class="list-name1">{{item.hospital_name}}</span>
                    <div class="list-money-box">
                      <span style="color: #FF0000;">￥<span class="money-text">{{item.give_service_price ? parseFloat(item.give_service_price).toFixed(2) : '0.00'}}</span></span>
                      <span>销量：{{item.goodsNumbers}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="$route.query.type == '2'">
              <div @click="toPage(item)" class="list-item-box1" v-for="(item, index) in list" :key="index">
                <div class="list-head-box">
                  <img :src="item.hospital_picture" alt="" srcset="">
                  <div class="list-name-box">
                    <span class="list-name">{{item.hospital_name}}</span>
                    <span class="list-type">{{item.departmentName}}</span>
                  </div>
                </div>
                <div class="list-addr-box">
                  <van-icon name="location" />
                  <span>{{item.address}}</span>
                </div>
              </div>
            </div>
            <div v-if="$route.query.type == '3'">
              <div @click="toPage(item)" class="list-item-box2" v-for="(item, index) in list" :key="index">
                <div class="list-head-box">
                  <img src="https://hqpz.tanjirj.com//uploads/hospital_img/henanshengertongyiyuan.jpg" alt="" srcset="">
                  <div class="list-name-box">
                    <span class="list-name">{{item.name}}</span>
                    <div class="list-zz">
                      <span v-if="item.isCard != '0'" style="background-color: rgba(89,89,255,.07);color: #1989fa;">身份认证</span>
                      <span v-if="item.isQualification != '0'" style="background-color: rgba(234,135,68,.07);color: #ea8744;">资格证书</span>
                    </div>
                    <span class="list-name1">陪诊医院：{{item.hospitalName}}</span>
                    <span class="list-name1">陪诊项目：{{item.giveServiceName}}</span>
                  </div>
                </div>
                <div class="list-addr-box">
                  <div>
                    <span>陪诊次数：</span>
                    <span class="value-text">{{item.goodsNumbers}}</span>
                    <span>次</span>
                  </div>
                  <div>
                    <span>陪诊价格：</span>
                    <span class="value-text">{{item.give_service_price}}</span>
                    <span>元起</span>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import { findScreenList } from '@/api/medical.js'
export default {
  name: 'index',
  data () {
    return {
      // optionItem: [
      //   { text: '全部项目', value: 0 },
      //   { text: '诊前预约', value: 1 },
      //   { text: '代办问诊', value: 2 },
      //   { text: '代办买药', value: 3 },
      //   { text: '送取结果', value: 4 },
      //   { text: '就医陪诊', value: 5 }
      // ],
      // optionMoney: [
      //   { text: '价格', value: 0 },
      //   { text: '价格由低到高', value: 1 },
      //   { text: '价格由高到低', value: 2 }
      // ],
      // optionNum: [
      //   { text: '销量', value: 0 },
      //   { text: '销量由低到高', value: 1 },
      //   { text: '销量由高到低', value: 2 }
      // ],
      loading: false,
      finished: false,
      list: [],
      isLoading: false,
      params: {
        province: this.$store.state.app.city.province_code,
        city: this.$store.state.app.city.city_code,
        type: this.$route.query.type,
        give_service_name: '',
        hospital_name: '',
        name: ''
      },
      searchKey: ''
    }
  },
  created () {},
  methods: {
    toPage (data) {
      if (this.$route.query.type == '1') {
        this.$router.push({
          path: '/productDetail',
          query: {
            give_service_type: data.give_service_name,
            give_service_id: data.give_service_id
          }
        })
      } else if (this.$route.query.type == '2') {
        this.$router.push({
          path: '/hospitalDetail',
          query: {
            id: data.hospital_id
          }
        })
      } else if (this.$route.query.type == '3') {
        this.$router.push({
          path: '/waiterDetail',
          query: {
            id: data.accompanying_physician_id
          }
        })
      }
    },
    searchInfo () {
      this.clearParam()
    },
    onLoad () {
      this.params[(this.$route.query.type == '1' ? 'give_service_name' : this.$route.query.type == '2' ? 'hospital_name' : 'name')] = this.searchKey
      findScreenList(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.list = res.data.data
          this.loading = false
          this.finished = true
          this.isLoading = false
        }
      })
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1)
      //   }
      //   this.loading = false
      //   if (this.list.length >= 40) {
      //     this.finished = true
      //   }
      // }, 1000)
    },
    clearParam () {
      this.list = []
      this.params.give_service_name = ''
      this.params.hospital_name = ''
      this.params.name = ''
      this.loading = true
      this.finished = false
      this.onLoad()
    },
    onRefresh () {
      this.clearParam()
    }
  },
  mounted () {
    this.searchKey = this.$route.query.searchKey
    this.params.type = this.$route.query.type
  }
}
</script>

<style scoped lang="less">
  .content-div{
    font-size: 12px;
    .search-box{
      padding: 10px;
      /deep/ .van-search__content{
        border: 1px solid #1989fa;
        background-color: #FFFFFF;
      }
      /deep/ .van-icon-search:before{
        color: #1989fa;
      }
    }
    .list-search-box{
      padding: 10px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      font-size: 12px;
      background-color: #1989fa;
      position: relative;
      top: -1px;
      /deep/ .van-ellipsis{
        color: #FFFFFF !important;
      }
      /deep/ .van-dropdown-menu__bar{
        background-color: unset;
        box-shadow: unset;
        height: unset;
      }
      /deep/ .van-dropdown-menu__title{
        padding: 0 10px 0 0;
        color: #FFFFFF;
      }
      /deep/ .van-dropdown-menu{
        margin-right: 20px;
      }
      /deep/ .van-dropdown-menu__title::after{
        right: -.1rem;
        color: #FFFFFF !important;
      }
    }
    .list-outbox{
      width: 300px;
      margin: 14px 10px 10px;
      border-radius: 10px;
      .list-box{
        box-sizing: border-box;
        font-size: 12px;
        .list-item-box1{
          background-color: #FFFFFF;
          margin-bottom: 10px;
          border-radius: 5px;
          border: 1px solid #eeeeee;
          box-sizing: border-box;
          padding: 10px;
          box-shadow: 0px 0px 10px #eeeeee;
          .list-head-box{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            padding-bottom: 6px;
            height: 50px;
            .list-name-box{
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: flex-start;
              height: 100%;
              width: calc(100% - 60px);
              .list-name{
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                white-space: nowrap;
                width: 100%;
              }
            }
            img{
              width: 50px;
              height: 50px;
              margin-right: 10px;
            }
          }
          .list-addr-box{
            color: #1989fa;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            span{
              color: #999999;
              padding-left: 4px;
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
              white-space: nowrap;
              width: calc(100% - 30px);
            }
          }
        }
        .list-item-box2{
          margin-bottom: 10px;
          border-radius: 5px;
          border: 1px solid #eeeeee;
          background-color: #FFFFFF;
          box-sizing: border-box;
          padding: 10px;
          box-shadow: 0px 0px 10px #eeeeee;
          .list-head-box{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            padding-bottom: 6px;
            height: 70px;
            .list-name-box{
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: flex-start;
              height: 100%;
              width: calc(100% - 80px);
              .list-zz{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                span{
                  margin-top: 2px;
                  padding: 2px 6px;
                  font-size: 10px;
                  margin-right: 10px;
                  border-radius: 4px;
                }
              }
              .list-name{
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                white-space: nowrap;
                width: 100%;
              }
              .list-name1{
                color: #AAAAAA;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                white-space: nowrap;
                width: 100%;
              }
            }
            img{
              width: 70px;
              height: 70px;
              margin-right: 10px;
            }
          }
          .list-addr-box{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            color: #999999;
            .value-text{
              color: #1989fa;
            }
          }
        }
        .list-item-box3{
          margin-bottom: 10px;
          border-radius: 5px;
          border: 1px solid #eeeeee;
          background-color: #FFFFFF;
          box-sizing: border-box;
          padding: 10px;
          box-shadow: 0px 0px 10px #eeeeee;
          .list-head-box{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            height: 60px;
            .list-name-box{
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: flex-start;
              height: 100%;
              width: calc(100% - 90px);
              .list-name{
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                white-space: nowrap;
                width: 100%;
              }
              .list-name1{
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                white-space: nowrap;
                width: 100%;
              }
              .list-money-box{
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                font-size: 10px;
                padding-bottom: 4px;
                color: #999999;
                .money-text{
                  font-size: 12px;
                }
              }
              .list-service-for{
                padding-top: 4px;
                display: flex;
                flex-direction: row;
                align-items: center;
                img{
                  width: 20px;
                  height: 20px;
                  border-radius: 10px;
                  margin-right: 10px;
                }
              }
            }
            img{
              width: 60px;
              height: 60px;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
</style>
